<template>
  <div id="app">
    <div class="header">
      <div class="top">
        <div class="left">
          <h3><nut-icon @click="back" name="left"></nut-icon></h3>
        </div>
        <div class="right">
          <h3>{{ moments.trainNumber }}</h3>
        </div>
      </div>
      <div class="button">
        <div class="left" style="color: green">前一天</div>
        <div class="count" style="color: green">{{ newTime }}</div>
        <div class="right" style="color: green">后一天</div>
      </div>
    </div>
    <div class="zw" style="height: 82px"></div>
    <div class="main">
      <div class="headerTop">
        <ul>
          <li style="margin-left: 2%">{{ moments.dStation }}</li>
          <li>{{ moments.trainNumber }}</li>
          <li style="margin-right: 2%">{{ moments.aStation }}</li>
        </ul>
        <ul>
          <li style="margin-left: 2%">
            <h3>{{ moments.dTime }}</h3>
          </li>
          <li>— <span style="color: green">时刻表</span> —</li>
          <li style="margin-right: 2%">
            <h3>{{ moments.aTime }}</h3>
          </li>
        </ul>
        <ul>
          <li style="margin-left: 2%">09-09</li>
          <li>耗时{{ moments.time }}</li>
          <li style="margin-right: 2%">09-09</li>
        </ul>
      </div>
      <dl v-for="(v, i) in datas" :key="i" class="wrapper">
        <ul>
          <li>{{ v.type }}</li>
          <li style="color: orange">￥{{ v.priceMsg }}</li>
          <li></li>
          <li></li>
          <li>{{ v.ticketsLeft }}</li>
          <li>
            <span style="color: orange" @click="reserve(v, i)">收起</span>
          </li>
        </ul>
        <div class="openbox-container" style="margin-top: 0px" ref="openBoxs">
          <div class="content" style="height: 100px; width: 100%">
            <div class="moment_div">
              <div style="float: left" class="moment_left">
                <div>快速预定</div>
                <div style="color: #ccc">含40元出行保障 快速出票 迅捷无忧</div>
              </div>
              <div class="moment_right">
                <van-button
                  plain
                  hairline
                  type="primary"
                  class="vanbtn"
                  @click="moment_btn(v)"
                  >买票</van-button
                >
              </div>
            </div>
            <div class="moment_div">
              <div style="float: left" class="moment_left">
                <div>普通预定</div>
                <div style="color: #ccc">出票较慢，高峰需要排队</div>
              </div>
              <div class="moment_right">
                <van-button
                  plain
                  hairline
                  type="primary"
                  class="vanbtn"
                  @click="moment_btn(v)"
                  >买票</van-button
                >
              </div>
            </div>
          </div>
        </div>
      </dl>
    </div>
  </div>
</template>

<script lang="ts">
import { api } from "../../api/api";
import { reactive, ref, toRefs, onBeforeMount } from "vue";
import router from "../../router";
export default {
  setup() {
    // 返回上一页
    const state = reactive({
      moments: JSON.parse(localStorage.getItem("moment") || ""),
      openHeight: 0,
      isOpen: false,
      openBoxs: ref(),
      newTime: "",
    });
    onBeforeMount: {
      let weeks = ["日", "一", "二", "三", "四", "五", "六"];
      state.newTime =
        new Date().getMonth() +
        "月" +
        new Date().getDate() +
        "日 " +
        "周" +
        weeks[new Date().getDay()];
    }
    function back() {
      history.go(-1);
    }
    function moment_btn(val: object) {
      router.push("/reserve");
      localStorage.setItem("reserve", JSON.stringify(val));
    }
    function reserve(val: any, index: number) {
      state.isOpen = !state.isOpen;

      let openBox = state.openBoxs[index];
      let boxheight = openBox.offsetHeight;
      if (boxheight === state.openHeight) {
        //展开
        openBox.style.height = "auto";
        boxheight = openBox.offsetHeight;
        openBox.style.height = state.openHeight + "px";
        let f = document.body.offsetHeight; // 必加 (不知道具体是为什么必加, 测试时发现若不加在展开时候会没有过渡效果)
        openBox.style.height = boxheight + "px";
      } else {
        //折叠
        openBox.style.height = state.openHeight + "px";
      }
    }
    // 获取数据
    const datas = reactive([]);
    api.moment.gener().then((res: any) => {
      Object.assign(datas, res.data.candidates);
      console.log(res.data.candidates);
    });
    return {
      ...toRefs(state),
      // 返回上一页
      back,
      datas,
      reserve,
      moment_btn,
    };
  },
};
</script>

<style lang="scss" scoped>
#app {
  width: 100%;
  height: 844px;
  background: #eee;
}
html,
body {
  width: 100%;
  background: #eee;
}
.header {
  width: 100%;
  background: #1ba9ba;
  height: 1.9rem;
  position: fixed;
  .button {
    height: 1rem;
    background: #eee;
    line-height: 1rem;
    display: flex;
    .count {
      flex: 1;
      text-align: center;
    }
    .left {
      margin-left: 5%;
    }
    .right {
      margin-right: 5%;
    }
  }
}
.top {
  display: flex;
  color: white;
  height: 1rem;
  line-height: 1rem;
  .left {
    margin-left: 2%;
  }
  .right {
    flex: 1;
    text-align: center;
  }
}
.bottom {
  width: 84%;
  margin-left: 8%;
  height: 1.3rem;
  line-height: 1.3rem;
}

.main {
  width: 94%;
  margin-left: 3%;
  .headerTop {
    height: 2.5rem;
    background: white;
    line-height: 0.8rem;
    font-size: 0.35rem;
    ul {
      display: flex;
      justify-content: space-between;
    }
  }
  dl {
    width: 100%;
    height: auto;
    border-bottom: 1px solid #ccc;
    margin-top: 5%;
    // background: white;
    ul {
      display: flex;
      li {
        width: 25%;
        height: 0.7rem;
        line-height: 0.7rem;
        text-align: center;
      }
    }
  }
}
.wrapper {
  // width: 100%;
  // height: auto;
  // border: 1px solid gray;
  // padding: 10px 16px;
  box-sizing: border-box;
  cursor: pointer;

  .foldbox {
    border: 1px solid red;
    height: 2rem;
  }

  .openbox-container {
    height: 1rem;
    height: 0;
    overflow: hidden;
    transition: height ease 0.5s; //动画效果
    background: transparent;
    box-sizing: border-box;

    .content {
      margin-top: 0.15rem;
      // background: darkslategray;
    }
  }
}
.moment_div {
  padding-top: 0.4rem;
  display: flex;
}
.moment_left {
  flex: 2;
  font-size: 0.28rem;
}
.moment_right {
  flex: 1;
  text-align: right;
}
.vanbtn {
  height: 0.6rem;
  color: #f90;
  width: 50px;
  font-size: 0.3rem;
  padding: 1px 5px;
  border-color: #f90;
  background-color: #f5f5f5;
}
</style>
